<template>
	<view class="wrapper">
    <view class="bg"></view>
    <view class="header">
      <view class="avatar image" @click="setAvatar">
        <!--<image :src="user.avatar" v-if="user.avatar" />-->
        <u-avatar :src="user.avatar" size="150" v-if="user.av * 1 === 0"></u-avatar>
        <u-avatar :src="baseUrl + user.avatar" size="150" v-else></u-avatar>
      </view>
      <view class="info" @click="pai">
        <view class="nickname">{{user.nickname}}</view>
        <view class="mobile">{{user.mobile}}<template v-if="user.xiao > 0">(小号)</template></view>
        <view class="level" v-if="user.level0">
          {{user.level0.display}}
          (ID: {{user.id}})
        </view>
        <!--<view class="area">{{user.city}}</view>-->
        <view class="area left-right" v-if="user.ab" style="margin-top: 5px">
          <view class="x">
            <view class="y" v-if="user.ab.left_id > 0">L: {{user.ab.left_id}} </view>
            <view class="y" v-else>L: * </view>
          </view>
          <view class="x">
            <view class="y" v-if="user.ab.right_id > 0" style="margin-left: 10px">R: {{user.ab.right_id}}</view>
            <view class="y" v-else style="margin-left: 10px">R: *</view>
          </view>
        </view>
      </view>
      <view class="password" @click="goRePassword" v-if="false">修改密码</view>
      <view class="password transfer" @click="goTransfer" v-if="open_transfer">互 转</view>
    </view>
    <view class="account">
      <view class="account-item" v-for="(item, index) in account" :key="index" @click="goAccount(item)">
        <view class="num">{{ item.total }}</view>
        <view class="text">{{ item.text }}</view>
      </view>
    </view>
    <view class="order">
      <view class="title">
        <view class="name">我的订单</view>
        <view class="more" @click="goOrderAll">
          查看全部订单
          <u-icon name="arrow-right" color="#8e8f91" size="24rpx"></u-icon>
        </view>
      </view>
      <view class="list">
        <view class="item" v-for="(item, index) in orderList" :key="index" @click="goOrderItem(item)">
          <view class="image">
            <image :src="'/static/order/' + item.image + '.png'"></image>
          </view>
          <view class="text">{{ item.text }}</view>
          <span class="count_x" v-if="user.order_count && user.order_count[item.image] > 0">{{ user.order_count[item.image] }}</span>
        </view>
      </view>
    </view>
    <view class="service">
      <view class="title">
        <view class="name">我的服务</view>
      </view>
      <view class="list">
        <view class="item" v-for="(item, index) in serviceList" :key="index" @click="goService(item)">
          <view class="image">
            <image :src="'/static/service/' + item.image + '.png'"></image>
          </view>
          <view class="text">{{ item.text }}</view>
        </view>
      </view>
    </view>
    <view class="tools">
      <view class="title">
        <view class="name">我的工具</view>
      </view>
      <view class="list">
        <view class="item" v-for="(item, index) in toolList" :key="index" @click="goTool(item)">
          <view class="image">
            <image :src="'/static/service/' + item.image + '.png'"></image>
          </view>
          <view class="text">{{ item.text }}</view>
        </view>
      </view>
    </view>
    <u-modal :show="showTip" @confirm="confirmTip" @cancel="showTip = false" ref="uModal" :showCancelButton="true">
      您还没有设置昵称或者头像,现在去设置?
    </u-modal>
    <v-tab :selected="'/pages/center/index'" />
    <view class="app-link" v-if="false">
      <text class="color" @click="goAgreementUser">《用户协议》</text>
      <text>|</text>
      <text class="color" @click="goAgreementPrivacy">《隐私政策》</text>
    </view>
    <view class="copy" v-if="false">
      <text>Copyright @ 2025 安永(中国)保健品有限公司</text>
    </view>
  </view>
</template>

<script>
import Tab from '../../components/tab'
import base64 from '../../util/base64'
import config from '../../config/config'
import { clearAll } from '../../util/cache'
import { qrcode } from '../../util/platform'
import User from '../../api/user'
import Service from '../../api/service'
import Pay from '../../api/pay'
const userModel = new User()
const serviceModel = new Service()
const payModel = new Pay()

	export default {
    components: {
      'v-tab': Tab
    },
		data() {
			return {
			  // 开启互转
        open_transfer: true,
        showTip: false,
        baseUrl: config.baseUrl,
        user: {
          account: {},
          level: {},
          orderCount: {},
        },
        account: [],
        orderList: [
          { image: 'non_payment', text: '待付款', index: '1' },
          { image: 'paid', text: '待发货', index: '2' },
          { image: 'wait_receiving', text: '待收货', index: '3' },
          { image: 'received', text: '待评价', index: '4' },
          { image: 'service', text: '售后', index: '5' },
          // { image: 'service', text: '拼团', index: '5' },
        ],
        serviceList: [
          { image: 'qrcode', text: '推荐码', url: 'qrcode' },
          { image: 'team', text: '我的团队', url: 'team' },
          { image: 'commission', text: '我的佣金', url: 'commission' },
          { image: 'cash', text: '提现管理', url: 'cash' },
          { image: 'password', text: '支付密码', url: 'pay-password' },
          { image: 'bank', text: '银行卡', url: 'bank' },
          { image: 'address', text: '收货地址', url: 'address' },
          { image: 'learn', text: '商学院', url: 'learn' },
          // { image: 'xiao', text: '小号', url: 'xiao' },
        ],
        toolList: [
          { image: 'fav', text: '商品收藏', url: 'fav' },
          { image: 'message', text: '消息公告', url: 'news' },
          { image: 'comment', text: '我的评论', url: 'comment' },
          { image: 'about', text: '关于我们', url: 'about' },
          { image: 'service', text: '联系客服', url: 'contact' },
          { image: 'clear', text: '清除缓存', url: 'cache' },
          { image: 'logout', text: '退出登录', url: 'logout' }
        ]
			}
		},
    onLoad() {
      uni.hideTabBar({
        animation: false,
        success: () => {

        },
        fail: () => {

        }
      })
    },
    onShow() {
		  this.getInfo()
      this.getTeamTotal()
		},
		methods: {
      pai() {
        uni.navigateTo({
          url: '/pages/center/pai'
        })
      },
      goAgreementPrivacy() {
        uni.navigateTo({
          url: '/sub_common/user/agreement_privacy'
        })
      },
      goAgreementUser() {
        uni.navigateTo({
          url: '/sub_common/user/agreement_user'
        })
      },
      confirmTip() {
        this.showTip = false
        uni.navigateTo({
          url: '/sub_common/user/avatar'
        })
      },
      getInfo() {
        userModel.getInfo().then(response => {
          let { data } = response
          data = base64.parse(data)
          this.user = data

          // console.log(data)

          // 小号
          if (+this.user.xiao === 0) {
            console.log(this.serviceList.length)
            if (this.serviceList.length === 8) {
              this.serviceList.push({ image: 'xiao', text: '小号', url: 'xiao' })
            }
          }

          // console.log(111,data.order_count)
          // console.log(data.open_transfer)
          this.open_transfer = data.open_transfer

          // console.log(config.baseUrl.indexOf('192.168') , config.baseUrl.indexOf('localhost'))

          // h5 openid
          // if (!data.openid) {
          if (!data.openid && (config.baseUrl.indexOf('192.168') === -1 && config.baseUrl.indexOf(('localhost') === -1))) {
            /*#ifdef H5*/
            // 在浏览器端（H5）执行的逻辑
            const domain = window.location.origin
            // openid redirect params
            const redirect = base64.encode(this.$route.path)
            payModel._getOpenidH5({
              user_id: data.id,
              redirect_url: domain + '/sub_common/user/openid?redirect=' + redirect,
              user_info: true
            }).then(res => {
              if (!res.data.openid) {
                const ua = navigator.userAgent.toLowerCase()
                if (ua.indexOf('micromessenger') !== -1) {
                  window.location = res.data.url
                }
              }
            })
            /*#endif*/
          }

          // 保存到store中, 其它地方使用, 比如地址编辑
          this.$store.dispatch('User/set_info', data)
          this.user.orderCount = data.order_count


          // 提示完成对像与昵称
          /*#ifdef APP-PLUS*/
          if (!data.avatar || !data.nickname) {
            this.showTip = true
          }
          /*#endif*/

          // 小程序手机号获取
          /*#ifdef MP-WEIXIN*/
          // 微信小程序端执行的逻辑
          if (!data.mobile) {
            return uni.navigateTo({
              url: '/sub_common/user/mobile'
            })
          }
          /*#endif*/

          // 图像处理, 不能强制
          /*#ifdef MP-WEIXIN*/
          if (!data.avatar && (!data.base64Image && +data.av === 0)) {
            const key = 'update_avatar'
            const is = uni.getStorageSync(key)
            if (!is) {
              uni.setStorageSync(key, true)
              return uni.navigateTo({
                url: '/sub_common/user/wx_avatar'
              })
            }
          }
          /*#endif*/


          if (data.account) {
            const account = data.account
            // console.log(account)
            const balance = Number.parseFloat(+account.balance) || 0
            const score = Number.parseFloat(+account.score) || 0
            // const ticket = Number.parseFloat(+account.ticket) + Number.parseFloat(+account.await_ticket) || 0
            this.account = [
              // { total: +ticket.toFixed(2), text: '红包', url: '/sub_common/ticket/index' },
              { total: +balance.toFixed(2), text: '绿色积分', url: '/sub_common/balance/index' },
              { total: +score.toFixed(2), text: '复销积分', url: '/sub_common/score/index' },
              // { total: 0, text: '团队', url: '/sub_service/team/index?type=0' },
              // { total: 0, text: '直推', url: '/sub_service/team/index?type=1' },
            ]
          }
          // console.log(this.user)
        })
      },
      // 团队人数
      getTeamTotal() {
        serviceModel.teamTotal().then(response => {
          const { data } = response
          // this.account[1].total = data.all
          // this.account[2].total = data.first_recommend
        })
      },
      // 修改头像
      setAvatar() {
        uni.navigateTo({
          url: '/sub_common/user/avatar'
        })
      },
      // 互转
      goTransfer() {
        uni.navigateTo({
          url: '/sub_service/transfer/index'
        })
      },
      // 修改密码
      goRePassword() {
        uni.navigateTo({
          url: '/sub_common/user/re-password'
        })
      },
      // 帐户点击
      goAccount(item) {
        uni.navigateTo({
          url: item.url
        })
      },
      // 全部订单
      goOrderAll() {
        uni.navigateTo({
          url: '/sub_service/order/index'
        })
      },
      goOrderItem(item) {
        uni.navigateTo({
          url: `/sub_service/order/index?type=${item.index}`
        })
      },
      // 我的服务
      goService(item) {
        const url = item.url
        if  (url === 'qrcode') {
          qrcode()
        } else {
          uni.navigateTo({
            url: `/sub_service/${url}/index`
          })
        }

      },
      // 我的工具
      goTool(item) {
        const url = item.url
        if (url === 'cache') {
          clearAll()
          uni.showToast({
            icon: 'none',
            title: '操作成功'
          })
        } else if (url === 'logout') {
          uni.showModal({
            title: '您确定要退出登录吗?',
            success: res => {
              if (res.confirm) {
                this.$store.dispatch('User/logout').then(() => {
                  uni.switchTab({
                    url: '/pages/index/index'
                  })
                })
              }
            }
          })
        } else {
          uni.navigateTo({
            url: `/sub_service/${url}/index`
          })
        }
      }
		}
	}
</script>

<style lang="scss" scoped>
//.left-right {
//  display: flex;
//  align-items: center;
//  .x {
//    display: flex;
//    align-items: center;
//    vertical-align: center;
//  }
//}
.area {
  display: flex;
  .x {
    display: flex;
    flex-direction: row;
    .y {
      //width: 200rpx;
      //background: red;
      display: block;
    }
  }
}
.app-link {
  display: flex;
  justify-content: center;
  margin: 15px 0;

  text {
    color: #cccccc;
    margin: 0 5rpx;
    &.color {
      color: $main_color;
    }
  }
}
.copy {
  display: flex;
  justify-content: center;
}
.wrapper {
  background: $background_color;
  padding-bottom: 100px;
  //min-height: 500px;
  .bg {
    background-image: url('#{$base_url}/mini/bg/center.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    margin-bottom: -190px;
    padding-top: 10px;
    box-sizing: border-box;
    height: 190px;
  }
  .header {
    //background: red;
    height: 200rpx;
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    position: relative;
    .avatar {
      width: 150rpx;
      height: 150rpx;
      background: white;
      border-radius: 50%;
      overflow: hidden;
    }
    .info {
      width: 400rpx;
      padding-left: 20rpx;
      font-size: 30rpx;
      color: white;
      .mobile {
        margin: 7rpx 0;
      }
      .level {
        font-weight: 700;
        color: $main_color;
        background: white;
        padding: 3px 10px;
        border-radius: 10px;
        display: inline-block;
        //font-size: 24rpx;
      }
    }
    .password {
      position: absolute;
      right: 20rpx;
      bottom: 80rpx;
      background: red;
      border: 1px solid white;
      width: 60px;
      height: 22px;
      line-height: 22px;
      border-radius: 5px;
      color: white;
      //font-size: 24rpx;
      text-align: center;
      &.transfer {
        bottom: 20rpx;
        background: $main_color;
      }
    }
  }
  .account {
    height: 180rpx;
    margin: 20rpx;
    background: white;
    border-radius: 10rpx;
    display: flex;
    padding: 40rpx;
    justify-content: space-around;
    box-sizing: border-box;
    .account-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: baseline;
      text-align: center;
      .num, .text {
        flex: 1;
        width: 100%;
        //background: red;
        font-size: 30rpx;
      }
      .num {
        color: red;
        font-weight: 700;
        font-size: 36rpx;
      }
    }
  }
  .order {
    //font-size: 24rpx;
    margin: 20rpx;
    background: white;
    border-radius: 10rpx;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 45px;
      border-bottom: 1rpx solid #efefef;
      padding: 0 20rpx;
      .name {
        font-weight: 700;
        font-size: 28rpx;
      }
      .more {
        color: #8e8f91;
        display: flex;
      }
    }
    .list {
      display: flex;
      justify-content: space-around;
      padding: 30rpx 0;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        //background: red;
        position: relative;
        .count_x {
          background: $main_color;
          position: absolute;
          top: 0;
          right: 0;
          width: 50rpx;
          height: 50rpx;
          overflow: hidden;
          line-height: 50rpx;
          border-radius: 50%;
          opacity: 0.85;
          text-align: center;
          color: white;
        }
      }
      .image {
        height: 30px;
        width: 30px;
        padding: 5px;
        //background: red;
        image {
          width: 100%;
          height: 100%;
        }
      }

    }
  }
  .service, .tools {
    //font-size: 24rpx;
    margin: 20rpx;
    background: white;
    border-radius: 10rpx;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 45px;
      border-bottom: 1rpx solid #efefef;
      padding: 0 20rpx;
      .name {
        font-weight: 700;
        font-size: 28rpx;
      }
      .more {
        color: #8e8f91;
        display: flex;
      }
    }
    .list {
      display: flex;
      justify-content: start;
      padding: 30rpx 0;
      flex-wrap: wrap;
      .item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 20rpx;
        //background: red;
      }
      .image {
        height: 35px;
        width: 35px;
        padding: 5px;
        //background: red;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
